import React, {forwardRef, useEffect, useImperativeHandle, useState} from "react";
import { Button, Space, Table, TableColumnType, message } from "antd";
import { clueCompanyTypes  } from "@/constants/types";
import { calculateTableWidth } from "@/utils/util";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { useComponentDidMount } from "@/hooks";


interface tabProps {
  activeKey: string;
  tabKey: string,
  refreshNum: Function,
  tabChangeShouldUpdateTab: string[]
}
const CouponAllotTable = forwardRef(({activeKey, tabKey, refreshNum, tabChangeShouldUpdateTab}: tabProps, ref) => {
  const [dataSource, setDataSource] = useState([]);
  const [pagination, setPagination] = useState({
    pageNum: 1,
    pageSize: 10,
    total: 0
  });

  // Certify and receive
  const [currentRow, setCurrentRow] = useState<clueCompanyTypes | null>(null);


  const search = async (params:{pageNum: number; pageSize: number} = {
    pageNum: 1,
    pageSize: 10
  }) => {
    const statusMaps: any = {
      waitClaimNum: '0',
      claimedNum: '1'
    }
    // const res = await fetchClueList({
    //   ...params,
    //   status: statusMaps?.[tabKey]
    // });
    const res = {
      data: [],
      total: 0
    }
    setDataSource(res?.data || []);
    setPagination({
      ...params,
      total: res?.total
    });
  }


  const refreshTable = () => {
    if (activeKey !== tabKey) {
      return ;
    }
    search({
      pageNum: 1,
      pageSize: 10
    });
  }


  const fieldColumns: TableColumnType<clueCompanyTypes> [] = [
    {
      title: '合同编号',
      dataIndex: 'contractNo',
      width: 120
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (_, record) => <XlTableDictColumn type="clueStatus" value={record?.status} />
    },
    {
      title: '公司全称',
      dataIndex: '',
      ellipsis: true,
      width: 150
    },
    {
      title: '所属销售',
      dataIndex: '',
      width: 120
    },
    {
      title: '结算方式',
      dataIndex: 'settlementMethod',
      width: 120
    },
    {
      title: '结算日',
      dataIndex: '',
      width: 120
    },
    {
      title: '合同开始时间',
      dataIndex: '',
      width: 120
    },
    {
      title: '合同到期时间',
      dataIndex: '',
      width: 120
    },
    {
      title: '上传时间',
      dataIndex: '',
      width: 120
    },
    {
      title: '审核人',
      dataIndex: '',
      width: 120
    },
    {
      title: '备注',
      dataIndex: '',
      ellipsis: true,
      width: 150
    },
    {
      title: '操作',
      dataIndex: 'options',
      width: 150,
      fixed: 'right',
      render: (_, record) => {
    
        return (
          <Space>
            <Button type="link">审核</Button>
            <Button type="link">查看合同</Button>
          </Space>
        );
      }
    },
  ];
 

  const getColumns = () => {
    return fieldColumns;
  }


  useImperativeHandle(ref, () => ({
    refreshTable
  }));


  useEffect(() => {
    if (tabKey === activeKey && tabChangeShouldUpdateTab.includes(activeKey)) {
      search({
        pageNum: pagination.pageNum,
        pageSize: pagination.pageSize
      });
    }
  }, [tabKey, activeKey]);

  useComponentDidMount(() => {
    if (!tabChangeShouldUpdateTab.includes(activeKey)) {
      search({
        pageNum: pagination.pageNum,
        pageSize: pagination.pageSize
      });
    }
  })


  return (
    <>
      <Table
         bordered
         rowKey="id"
         dataSource={dataSource}
         columns={getColumns()}
         scroll={{x: calculateTableWidth(getColumns())}}
         pagination= {tabChangeShouldUpdateTab?.includes(activeKey) ? {
          showTotal: (total: number) => `共 ${total} 条`,
          ...pagination,
          onChange: (pageNum, pageSize) => {
            search({pageNum, pageSize});
          }
         } : false}
      />
    </>
  );
});


export default CouponAllotTable;